<template>
  <el-card :body-style="{ padding: '0px' }">
    <img :src="imageSrc" class="image" />
    <div style="padding: 10px">
      <span>{{ resourceName }}</span>
    </div>
    <div style="padding: 10px">
      <span>参考价格（元/千克）：{{ referencePrice }}</span>
    </div>
  </el-card>
</template>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
</style>
<script>
export default {
  props: {
    resourceType: String,
    referencePrice: Number,
  },
  computed: {
    resourceName() {
      // Map resource type to name
      const resourceNames = {
        paper: "废纸",
        plastic: "塑料",
        glass: "玻璃",
        metal: "金属",
        fabric: "布料",
      };
      return resourceNames[this.resourceType];
    },
    imageSrc() {
      // Map resource type to image source
      const imageSources = {
        paper: require("@/assets/images/paper.jpg"),
        plastic: require("@/assets/images/plastic.jpg"),
        glass: require("@/assets/images/galss.jpg"),
        metal: require("@/assets/images/metal.jpg"),
        fabric: require("@/assets/images/fabric.jpg"),
      };
      return imageSources[this.resourceType];
    },
  },
};
</script>